/*总容器*/
.wrapper {
    /*设置高宽为浏览器窗口的100%*/
    width: 100%;
    height: 100%;
}
/*header部分*/
.wrapper header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    /*文本颜色设置*/
    color: #fff;
    /*设置header内文本的字体大小为视口宽度的4.8%*/
    font-size: 4.8vw;
    /*相对于浏览器窗口定位*/
    position: fixed;
    left: 0;
    top: 0;
    /*设置header的堆叠顺序，z-index值越大，元素在页面上的层叠上下文中越靠上*/
    z-index: 1000;
    /*允许子元素在header内部进行灵活的对齐和分布*/
    display: flex;
    /*设置弹性盒子布局的主轴（默认为水平方向）上的对齐方式为居中*/
    justify-content: center;
    /*设置弹性盒子布局的侧轴（默认为垂直方向）上的对齐方式为居中*/
    align-items: center;
}
/*商家logo部分*/
.wrapper .business-logo{
    width: 100%;
    height: 35vw;
    /*设置.business-logo的顶部外边距为视口宽度的12%*/
    margin-top: 12vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .business-logo img{
    width: 40vw;
    height: 30vw;
    /*为图片添加一个边框半径为5像素的圆角效果，使得图片的边角变得圆润*/
    border-radius:5px ;
}
/*商家信息部分*/
.wrapper .business-info{
    width: 100%;
    height: 20vw;
    display: flex;
    /*弹性项目将垂直排列，从容器的开始到结束方向（即从上到下）*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wrapper .business-info h1{
    font-size: 5vw;
}
.wrapper .business-info p{
    /*设置header内文本的字体大小为视口宽度的3%*/
    font-size: 3vw;
    color: #666;
    /*设置.business-logo的顶部外边距为视口宽度的1%*/
    margin-top: 1vw;
}
/*食品列表部分*/
.wrapper .food{
    width: 100%;
    margin-bottom: 14vw;
}
.wrapper .food li{
    width: 100%;
    /*元素的总宽度和高度包括了内容、边框和内边距，但不包括外边距*/
    box-sizing: border-box;
    /*内边距为视口宽度的2.5%*/
    padding: 2.5vw;
    /*防止用户选择li元素内的文本*/
    user-select: none;
    display: flex;
    /*所有子元素均匀分布在水平主轴上，首尾两端分别贴紧li元素的边缘*/
    justify-content: space-between;
    align-items: center;
}
.wrapper .food li .food-left{
    display: flex;
    align-items: center;
}
.wrapper .food li .food-left img{
    width: 20vw;
    height: 20vw;
}
.wrapper .food li .food-left .food-left-info{
    margin-left: 3vw;
}
.wrapper .food li .food-left .food-left-info h3{
    font-size: 3.8vw;
    color:#555;
}
.wrapper .food li .food-left .food-left-info p{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}
.wrapper .food li .food-right{
    width: 16vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .food li .food-right .fa-minus-circle{
    font-size: 5.5vw;
    color:#999;
    /*光标变成手型符号*/
    cursor: pointer;
}
.wrapper .food li .food-right p{
    font-size: 3.6vw;
    color: #333;
}
.wrapper .food li .food-right .fa-plus-circle{
    font-size: 5.5vw;
    color:#0097EF;
    cursor: pointer;
}
/*购物车部分*/
.wrapper .cart{
    width: 100%;
    height: 14vw;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
}
.wrapper .cart .cart-left{
    flex: 2;
    background-color: #505051;
    display: flex;
}
.wrapper .cart .cart-left .cart-left-icon{
    width: 16vw;
    height: 16vw;
    box-sizing: border-box;
    /*border是边框样式设置,solid 指定边框的类型为实线,
    1.6vw指定边框的宽度为视口宽度的1.6%,
    #444指定边框的颜色为深灰色*/
    border: solid 1.6vw #444;
    border-radius: 8vw;
    background-color: #3190E8;
    font-size: 7vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -4vw;
    margin-left: 3vw;
    /*设置为相对定位*/
    position: relative;
}
.wrapper .cart .cart-left .cart-left-icon-quantity{
    width: 5vw;
    height: 5vw;
    border-radius: 2.5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /*设置为绝对定位*/
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}
/*给菜品总价的样式设定*/
.wrapper .cart .cart-left .cart-left-info p:first-child{
    font-size: 4.5vw;
    color: #fff;
    margin-top: 1vw;
}
/*给另需配送费的样式设定*/
.wrapper .cart .cart-left .cart-left-info p:last-child{
    font-size: 2.8vw;
    color: #AAA;
}
.wrapper .cart .cart-right{
    /*flex-grow, flex-shrink, 和 flex-basis属性的简写方式*/
    /*flex-grow 定义了当容器内有多余空间时，弹性项目可以增长的比例*/
    /*flex-shrink 定义了当容器空间不足时，弹性项目可以缩小的比例。*/
    /*flex-basis 定义了在分配多余空间之前，弹性项目的大小。*/
    flex:1;
    background-color: #38CA73;
}
/*达到起送费的结算按钮样子*/
.wrapper .cart .cart-right .cart-right-item{
    width: 100%;
    height:100%;
    background-color: #38CA73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*不够起送费的样式*/
/*.wrapper .cart .cart-right .cart-right-item{*/
/*    width: 100%;*/
/*    height:100%;*/
/*    background-color: #535356;*/
/*    color: #fff;*/
/*    font-size: 4.5vw;*/
/*    font-weight: 700;*/
/*    user-select: none;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/